<project-header class="top-header"></project-header>
  <project-page>

    <!-- Middle section -->
    <div class="middle-section">
      <div id="scrollable-content" class="middle-container has-scroll">
        <div class="middle-header">
          <div class="container-fluid">
            <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
            <alerts alerts="alerts"></alerts>
          </div>
        </div><!-- /middle-header-->
        <div class="middle-content">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12">
                <h1>
                  <span ng-if="clusterQuotas | hashSize">Cluster </span>Quota
                </h1>
                <div ng-if="!(quotas | hashSize) && !(clusterQuotas | hashSize)">
                  <div class="help-block">{{quotaHelp}}</div>
                  <p><em ng-if="!quotas && !clusterQuotas">Loading...</em><em ng-if="quotas || clusterQuotas">There are no resource quotas set on this project.</em></p>
                </div>

                <div ng-repeat="quota in clusterQuotas | orderBy: 'metadata.name'" class="gutter-bottom">
                  <h2 ng-if="(clusterQuotas | hashSize) > 1">{{quota.metadata.name}}</h2>
                  <div ng-if="$first" class="help-block">Limits resource usage across a set of projects.</div>
                  <dl ng-if="quota.spec.quota.scopes.length">
                    <dt>Scopes:</dt>
                    <dd>
                      <div ng-repeat="scope in quota.spec.quota.scopes">
                        {{scope | startCase}}
                        <span class="text-muted small" ng-if="scope | scopeDetails">&mdash; {{scope | scopeDetails}}</span>
                      </div>
                    </dd>
                  </dl>
                  <div>
                    <div row wrap style="justify-content: center;">
                      <div ng-if="quota.status.total.hard.cpu" class="mar-lg">
                        <h3 class="text-center">CPU <small>Request</small></h3>
                        <quota-usage-chart height="240" used="namespaceUsageByClusterQuota[quota.metadata.name].used.cpu" total="quota.status.total.hard.cpu" cross-project-used="quota.status.total.used.cpu" type="cpu" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div ng-if="quota.status.total.hard.memory" class="mar-lg">
                        <h3 class="text-center">Memory <small>Request</small></h3>
                        <quota-usage-chart height="240" used="namespaceUsageByClusterQuota[quota.metadata.name].used.memory" cross-project-used="quota.status.total.used.memory" total="quota.status.total.hard.memory" type="memory" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div ng-if="quota.status.total.hard['requests.cpu']" class="mar-lg">
                        <h3 class="text-center">CPU <small>Request</small></h3>                       
                        <quota-usage-chart height="240" used="namespaceUsageByClusterQuota[quota.metadata.name].used['requests.cpu']" cross-project-used="quota.status.total.used['requests.cpu']" total="quota.status.total.hard['requests.cpu']" type="cpu" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div ng-if="quota.status.total.hard['requests.memory']" class="mar-lg">
                        <h3 class="text-center">Memory <small>Request</small></h3>
                        <quota-usage-chart height="240" used="namespaceUsageByClusterQuota[quota.metadata.name].used['requests.memory']" cross-project-used="quota.status.total.used['requests.memory']" total="quota.status.total.hard['requests.memory']" type="memory" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div ng-if="quota.status.total.hard['limits.cpu']" class="mar-lg">
                        <h3 class="text-center">CPU <small>Limit</small></h3>                        
                        <quota-usage-chart height="240" used="namespaceUsageByClusterQuota[quota.metadata.name].used['limits.cpu']" cross-project-used="quota.status.total.used['limits.cpu']" total="quota.status.total.hard['limits.cpu']" type="cpu" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div ng-if="quota.status.total.hard['limits.memory']" class="mar-lg">
                        <h3 class="text-center">Memory <small>Limit</small></h3>                       
                        <quota-usage-chart height="240" used="namespaceUsageByClusterQuota[quota.metadata.name].used['limits.memory']" cross-project-used="quota.status.total.used['limits.memory']" total="quota.status.total.hard['limits.memory']" type="memory" class="quota-chart"></quota-usage-chart>
                      </div>
                    </div>
                  </div>

                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <th>Resource type</th>
                        <th>Used (this project)</th>
                        <th>Used (all projects)</th>
                        <th>Max</th>
                      </thead>
                      <tbody>
                        <tr ng-if='!quota.status.total.used' class="danger">
                          <td colspan="5">
                            <span data-toggle="tooltip" title="Missing quota status" class="pficon pficon-error-circle-o" style="cursor: help;"></span>
                            Status has not been reported on this quota usage record.  Any resources limited by this quota record can not be allocated.
                          </td>
                        </tr>
                        <!-- Don't show quotas for type `resourcequotas`. They are frequently at limit,
                             which is not something to worry about, and only a cluster admin can create
                             those resources anyway. -->
                        <tr ng-repeat="(resourceType, specMax) in quota.spec.quota.hard"
                            ng-if="resourceType !== 'resourcequotas'"
                            ng-class="{
                              warning: (quota.status.total.used[resourceType] | usageValue) >= (quota.status.total.hard[resourceType] | usageValue)
                            }">
                          <td>
                            {{resourceType | humanizeQuotaResource}}
                            <span ng-if="(quota.status.total.used[resourceType] | usageValue) >= (quota.status.total.hard[resourceType] | usageValue)" data-toggle="tooltip" title="Quota limit reached" class="pficon pficon-warning-triangle-o" style="cursor: help; vertical-align: middle;"></span>
                          </td>
                          <td>
                            <span ng-if="!namespaceUsageByClusterQuota[quota.metadata.name].used">&mdash;</span>
                            <span ng-if="namespaceUsageByClusterQuota[quota.metadata.name].used">{{namespaceUsageByClusterQuota[quota.metadata.name].used[resourceType] | usageWithUnits : resourceType}}</span>
                          </td>
                          <td>
                            <span ng-if="!quota.status.total.used">&mdash;</span>
                            <span ng-if="quota.status.total.used">{{quota.status.total.used[resourceType] | usageWithUnits : resourceType}}</span>
                          </td>
                          <td>
                            <span ng-if="!quota.status.total.hard">{{specMax  | usageWithUnits : resourceType}}</span>
                            <span ng-if="quota.status.total.hard">{{quota.status.total.hard[resourceType]  | usageWithUnits : resourceType}}</span>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

                <h1 ng-if="(clusterQuotas | hashSize) && (quotas | hashSize)">Project Quota</h1>
                <div ng-repeat="quota in quotas | orderBy: 'metadata.name'" class="gutter-bottom">
                  <h2 ng-if="(quotas | hashSize) > 1">{{quota.metadata.name}}</h2>
                  <div ng-if="$first" class="help-block mar-bottom-md">{{quotaHelp}}</div>
                  <dl ng-if="quota.spec.scopes.length">
                    <dt>Scopes:</dt>
                    <dd>
                      <div ng-repeat="scope in quota.spec.scopes">
                        {{scope | startCase}}
                        <span class="text-muted small" ng-if="scope | scopeDetails">&mdash; {{scope | scopeDetails}}</span>
                      </div>
                    </dd>
                  </dl>
                  <div>
                    <div row wrap style="justify-content: center;">
                      <div column ng-if="quota.status.hard.cpu" class="mar-lg">
                        <h3 class="text-center">CPU <small>Request</small></h3>
                        <quota-usage-chart used="quota.status.used.cpu" total="quota.status.hard.cpu" type="cpu" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div column ng-if="quota.status.hard.memory" class="mar-lg">
                        <h3 class="text-center">Memory <small>Request</small></h3>
                        <quota-usage-chart used="quota.status.used.memory" total="quota.status.hard.memory" type="memory" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div column ng-if="quota.status.hard['requests.cpu']" class="mar-lg">
                        <h3 class="text-center">CPU <small>Request</small></h3>
                        <quota-usage-chart used="quota.status.used['requests.cpu']" total="quota.status.hard['requests.cpu']" type="cpu" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div column ng-if="quota.status.hard['requests.memory']" class="mar-lg">
                        <h3 class="text-center">Memory <small>Request</small></h3>
                        <quota-usage-chart used="quota.status.used['requests.memory']" total="quota.status.hard['requests.memory']" type="memory" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div ng-if="quota.status.hard['limits.cpu']" class="mar-lg">
                        <h3 class="text-center">CPU <small>Limit</small></h3>
                        <quota-usage-chart used="quota.status.used['limits.cpu']" total="quota.status.hard['limits.cpu']" type="cpu" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div ng-if="quota.status.hard['limits.memory']" class="mar-lg">
                        <h3 class="text-center">Memory <small>Limit</small></h3>
                        <quota-usage-chart used="quota.status.used['limits.memory']" total="quota.status.hard['limits.memory']" type="memory" class="quota-chart"></quota-usage-chart>
                      </div>
                    </div>
                  </div>

                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <th>Resource type</th>
                        <th>Used</th>
                        <th>Max</th>
                      </thead>
                      <tbody>
                        <tr ng-if='!quota.status.used' class="danger">
                          <td colspan="5">
                            <span data-toggle="tooltip" title="Missing quota status" class="pficon pficon-error-circle-o" style="cursor: help;"></span>
                            Status has not been reported on this quota usage record.  Any resources limited by this quota record can not be allocated.
                          </td>
                        </tr>
                        <!-- Don't show quotas for type `resourcequotas`. They are frequently at limit,
                             which is not something to worry about, and only a cluster admin can create
                             those resources anyway. -->
                        <tr ng-repeat="(resourceType, specMax) in quota.spec.hard"
                            ng-if="resourceType !== 'resourcequotas'"
                            ng-class="{
                              warning: (quota.status.used[resourceType] | usageValue) >= (quota.status.hard[resourceType] | usageValue)
                            }">
                          <td>
                            {{resourceType | humanizeQuotaResource}}
                            <span ng-if="(quota.status.used[resourceType] | usageValue) >= (quota.status.hard[resourceType] | usageValue)" data-toggle="tooltip" title="Quota limit reached" class="pficon pficon-warning-triangle-o" style="cursor: help; vertical-align: middle;"></span>
                          </td>
                          <td>
                            <span ng-if="!quota.status.used">&mdash;</span>
                            <span ng-if="quota.status.used">{{quota.status.used[resourceType] | usageWithUnits : resourceType}}</span>
                          </td>
                          <td>
                            <span ng-if="!quota.status.hard">{{specMax  | usageWithUnits : resourceType}}</span>
                            <span ng-if="quota.status.hard">{{quota.status.hard[resourceType]  | usageWithUnits : resourceType}}</span>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

                <h1>Limit Range</h1>
                <div ng-if="!(limitRanges | hashSize)">
                  <div class="help-block">{{limitRangeHelp}}</div>
                  <p><em>{{emptyMessageLimitRanges}}</em></p>
                </div>

                <div ng-repeat="(limitRangeName, limitRange) in limitRanges">
                  <h2 ng-if="(limitRanges | hashSize) > 1">{{limitRangeName}}</h2>
                  <div ng-if="$first" class="help-block mar-bottom-md">{{limitRangeHelp}}</div>
                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <th>Resource type</th>
                        <th>
                          <span class="nowrap">
                            Min
                            <i class="small pficon pficon-help" data-toggle="tooltip" title="The minimum amount of this compute resource that can be requested."></i>
                          </span>
                        </th>
                        <th>
                          <span class="nowrap">
                            Max
                            <i class="small pficon pficon-help" data-toggle="tooltip" title="The maximum amount of this compute resource that can be requested.  The limit must also be below the maximum value."></i>
                           </span>
                        </th>
                        <th>
                          Default
                          <span class="nowrap">
                            Request
                            <i class="small pficon pficon-help" data-toggle="tooltip" title="A container will default to request this amount of a compute resource if no request is specified. The system will guarantee the requested amount of compute resource when scheduling a container for execution. If a quota is enabled for this compute resource, the quota usage is incremented by the requested value."></i>
                          </span>
                        </th>
                        <th>
                          Default
                          <span class="nowrap">
                            Limit
                            <i class="small pficon pficon-help" data-toggle="tooltip" title="The default limit defines the maximum amount of compute resource the container may have access to during execution if no limit is specified. If no request is made for the compute resource on the container or via a Default Request value, the container will default to request the limit."></i>
                          </span>
                        </th>
                        <th>
                          Max Limit/Request
                          <span class="nowrap">
                            Ratio
                            <i class="small pficon pficon-help" data-toggle="tooltip" title="If specified, the compute resource must have a request and limit that are both non-zero, where limit divided by request is less than or equal to the specified amount; this represents the max burst for the compute resource during execution."></i>
                          </span>
                        </th>
                      </thead>
                      <tbody>
                        <tr ng-repeat-start="limit in limitRange.spec.limits"></tr>
                        <tr ng-repeat="(type, typeLimits) in limitsByType[limitRangeName][limit.type]">
                          <td>{{limit.type}} {{type | computeResourceLabel : true}}</td>
                          <td>{{(typeLimits.min | usageWithUnits : type) || "&mdash;"}}</td>
                          <td>{{(typeLimits.max | usageWithUnits : type) || "&mdash;"}}</td>
                          <td>{{(typeLimits.defaultRequest | usageWithUnits : type) || "&mdash;"}}</td>
                          <td>{{(typeLimits["default"] | usageWithUnits : type) || "&mdash;"}}</td>
                          <td>{{typeLimits.maxLimitRequestRatio || "&mdash;"}}</td>
                        </tr>
                        <tr ng-repeat-end></tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div><!-- /col-* -->
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </project-page>
